<!-- 广告管理 -->
<template>
  <div class="container">
    <div class="titleBox">
      <span class="hint">员工服务端公有参数：</span>
    </div>
    <div class="upLosdBox">
      <span class="title_1">首页LOGO</span>
      <el-upload
        action="http://110.187.88.70:21605/employee/upAvatar"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-change="handleChange"
        :on-remove="handleRemove"
      >
        <i class="el-icon-plus" />
      </el-upload>
      <el-dialog>
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
    <div class="upLosdBox">
      <span class="title_1">首页背景</span>
      <el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-change="handleChange"
        :on-remove="handleRemove"
      >
        <i class="el-icon-plus" />
      </el-upload>
      <el-dialog>
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-col :span="11">
        <el-form-item label="活动名称">
          <el-input v-model="form.name" />
        </el-form-item>
      </el-col>
      <el-form-item>
        <el-button style="margin-left:20px" type="primary" @click="onSubmit">确定</el-button>
      </el-form-item>
    </el-form>

    <div class="titleBox">
      <span class="hint">老人端公有参数：</span>
    </div>
    <div class="upLosdBox">
      <span class="title_1">首页LOGO</span>
      <el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-change="handleChange"
        :on-remove="handleRemove"
      >
        <i class="el-icon-plus" />
      </el-upload>
      <el-dialog>
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>

  </div>
</template>

<script>
export default {
  components: {

  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      form: {
        name: ''
      }
    }
  },
  computed: {

  },
  watch: {

  },
  created() {

  },
  mounted() {

  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      console.log(file.url)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleChange(file, fileList) {
      console.log('file', URL.createObjectURL(file.raw))
      // this.imgA = URL.createObjectURL(file.raw);
    }
  }
}

</script>
<style lang='scss' scoped>
.container {
   padding: 20px;
   .titleBox{
      padding: 20px 0;
      .hint{
         color: rgb(63, 62, 62);
      }
   }
   .upLosdBox{
      padding: 0 0 20px 20px;
      .title_1{
         display: inline-block;
         margin-bottom: 20px;
         color: rgb(63, 62, 62);
      }
   }
}
</style>
